import React from 'react';
import { Text, View, Image } from '@ray-js/ray';
import Strings from '@/i18n';
import { Slider } from '@ray-js/smart-ui';
import _ from 'lodash';
import { LampColorSlider } from '@ray-js/components-ty-lamp';
import styles from './index.module.less';
import res from '../../../public/noiceImage';

export function ColorSet({
  colour = {
    hue: 0,
    saturation: 1000,
    value: 1000,
  },
  voice = 0,
  onChange,
  changeVoice,
  onHueChange,
  onHueStart,
}: {
  colour: {
    hue: number;
    saturation: number;
    value: number;
  };
  voice: number;
  changeVoice: (val: number) => void;
  onChange: (val: { hue: number; saturation: number; value: number }) => void;
  onHueChange: (val: number) => void;
  onHueStart: () => void;
}) {
  return (
    <View className={styles.container}>
      <Text className={styles.title}>{Strings.getLang('lightColor')}</Text>
      <LampColorSlider
        value={colour.hue}
        trackStyle={{
          height: '30rpx',
          width: `640rpx`,
          borderRadius: '15rpx',
          marginTop: 20,
        }}
        thumbStyle={{
          height: '50rpx',
          width: '50rpx',
          borderRadius: '27rpx',
          borderColor: 'transparent',
          border: '3rpx solid #fff',
        }}
        onTouchMove={val => {
          // setHue(val);
        }}
        onTouchEnd={val => {
          // setHue(val);
          // dpStructuredActions.colour_data.set({
          //   ...colour,
          //   hue: val,
          // });
          // onChange({
          //   ...colour,
          //   hue: val,
          // });
          onHueChange(val);
        }}
        onTouchStart={onHueStart}
      />
      <View className={styles.botContainer}>
        <View className={styles.botBox}>
          <View className={styles.botBoxHeader}>
            <Text className={styles.botBoxTitle}>{Strings.getLang('voice')}</Text>
            <Image className={styles.voiceIcon} src={res.voice} />
          </View>

          <View className={styles.botBoxValue}>
            <Text className={styles.botBoxValueText}>{voice}</Text>
            <Text className={styles.botBoxValueUnit}>%</Text>
          </View>

          <View className={styles.botBoxSlider}>
            <Slider
              enableTouch
              maxTrackHeight="12rpx"
              minTrackHeight="12rpx"
              thumbHeight="36rpx"
              thumbWidth="36rpx"
              max={100}
              min={0}
              step={1}
              value={voice}
              maxTrackColor="#DEDFE1"
              minTrackColor="#000"
              thumbColor="#000"
              onAfterChange={value => {
                changeVoice?.(value);
              }}
              moveEventName="changeVoice"
              style={{
                width: `270rpx`,
              }}
            />
          </View>
        </View>

        <View className={styles.botBox}>
          <View className={styles.botBoxHeader}>
            <Text className={styles.botBoxTitle}>{Strings.getLang('brightness')}</Text>
            <Image className={styles.voiceIcon} src={res.brightness} />
          </View>

          <View className={styles.botBoxValue}>
            <Text className={styles.botBoxValueText}>{colour.value / 10}</Text>
            <Text className={styles.botBoxValueUnit}>%</Text>
          </View>

          <View className={styles.botBoxSlider}>
            <Slider
              enableTouch
              maxTrackHeight="12rpx"
              minTrackHeight="12rpx"
              thumbHeight="36rpx"
              thumbWidth="36rpx"
              max={1000}
              min={0}
              step={10}
              value={colour.value}
              maxTrackColor="#DEDFE1"
              minTrackColor="#000"
              thumbColor="#000"
              onAfterChange={value => {
                onChange({
                  ...colour,
                  value,
                });
              }}
              style={{
                width: `270rpx`,
              }}
            />
          </View>
        </View>
      </View>
    </View>
  );
}
